<template>
  <div v-if="isLoginModalVisible" class="login-modal">
    <div class="modal-content">
      <h2>综合素质AI训练平台</h2>
      <div class="close" @click="hideModal">
        <img src="@/assets/close.png" alt="">
      </div>
      <div class="content">
        <div class="title">账号登录</div>
        <div class="item phone">
          <input type="text" placeholder="手机号/账号" v-model="username">
        </div>
        <div class="item password">
          <input type="password" placeholder="请输入密码" v-model="password">
        </div>
      </div>
      <button class="btn" @click="handleLogin">登录</button>
    </div>
  </div>
</template>

<script setup>
import { useAuthStore } from '@/stores/authStore';
import { storeToRefs } from 'pinia'; // 导入 storeToRefs 
import { ref } from 'vue';
import request from '@/request';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const emit = defineEmits(['login']);

const authStore = useAuthStore();
const { isLoginModalVisible } = storeToRefs(authStore); // 使用 storeToRefs 解构 

const username = ref('ceshi_teacher');
const password = ref('123456');


const hideModal = () => {
  authStore.hideLoginModal();
};

const handleLogin = async () => {
  // 在这里执行登录逻辑 
  const params = {
    username: username.value,
    password: password.value,
  }
  const res = await request.post('/api/master/login/index', params);
  console.log(res);
  emit("login")
  if (res.code === 1) {
    localStorage.setItem("token", res.data.token)
    localStorage.setItem("userInfo", JSON.stringify(res.data))
    authStore.setUserInfo(res.data);
    hideModal();
    if (res.data.group_id == 2) {
      router.replace('/reportLibrary');
    } else  {
      router.replace('/myReport');
    }
  
    
    // setTimeout(() => {
    //   window.location.reload(); // 刷新页面
    // }, 40);
    // window.location.reload(); // 刷新页面
  }
}
</script>

<style scoped lang="less">
.login-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  z-index: 999;
  align-items: center;

  .content {
    margin-top: 55px;
    padding: 0 54px;

    .title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      text-align-last: left;
      margin-bottom: 40px;
    }
  }

  .modal-content {
    width: 433px;
    height: 480px;
    background: url('@/assets/loginBg.svg') no-repeat;
    text-align: center;
    position: relative;

    .close {
      position: absolute;
      top: -22px;
      right: -74px;
      width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.2);

      img {
        width: 18px;
        height: 18px;
        object-fit: contain;
      }
    }

    h2 {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      margin-top: 47px;
    }

    input {
      height: 40px;
      width: 328PX;
      font-style: 14px;
      outline: none;
      border: none;
      border-bottom: 1px solid rgba(151, 151, 151, 0.33);
    }

    .phone {
      position: relative;

      input {
        padding-left: 32px;
      }

      &::before {
        content: "";
        width: 20px;
        height: 20px;
        background: url('@/assets/user1.png') no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .password {
      position: relative;

      input {
        padding-left: 32px;
      }

      &::before {
        content: "";
        width: 20px;
        height: 20px;
        background: url('@/assets/password.png') no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .btn {
      width: 302px;
      height: 46px;
      background: linear-gradient(90deg, #44AAFF 0%, #2E5DF4 99%, #2E5CF4 100%);
      border-radius: 23px;
      font-weight: 600;
      font-size: 20px;
      color: #FFFFFF;
      margin-top: 78px;
      line-height: 46px;
    }
  }
}
</style>